<template>
  <div class="w-100">
    <!--1-->
    <div class="home_nav">
      <div class="glyphicon glyphicon-menu-left col-xs-4 home_nav_left fs16" @click="$router.go(-1)"></div>
      <div class="col-xs-4 home_nav_middle fs18">鲜食柜</div>
      <div class="glyphicon glyphicon-option-horizontal col-xs-4 home_nav_right fs16"></div>
    </div>
    <!--2-->
    <div class="home_nav2 fs15"> 
      <div class="col-xs-4 col-xs-offset-2 home_nav2_saoma">扫码购物</div>
      <div class="col-xs-4">自助点餐</div>
      <div class="glyphicon glyphicon-user col-xs-2 home_nav2_user"></div>
    </div>
    <!--3-->
    <div class="home_qrcode fs13"  @click="scan">
        <img src="../../static/images/qr_code.png" alt="">
        <span>怎么找条形码?</span>
    </div>
    <!--4-->
    <div class="home_shopcart"><span class="col-xs-6">我的购物车</span><span class="col-xs-6 cleargoods" @click="cartdelgoods">清空购物车</span></div>
    <!--5-->
    <div class="home_container pl15">
      <!--正式-->
      <div class="row_style fs13" v-for="item of cartdata">
        <div class="row_one">{{item.goods_name}}</div>
        <div class="row_two">{{item.goods_price}}</div>
        <div class="row_three">
          <img src="../../static/images/button_minus_pre.png" width="32px;"  @click="goodsreduce(item)">
          <span>&nbsp;{{item.num}}&nbsp;</span>
          <img src="../../static/images/button_add_pre.png" width="32px;" @click="goodsadd(item)">
        </div>
        <div class="row_four"  @click="delgoods(item.id)">删</div>
      </div>
    </div>
    <!--6-->
    <div class="bottomnav fs14" v-if="totaldata">
          <div class="bottom_one">{{totaldata.price | pricereturn}}</div>
          <router-link to='/checkout'><div class="bottom_two fs17">立即支付</div></router-link>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
export default {
  name: 'home',
  data () {
    return {
      pathname:null,
      msg: 'Welcome to Your Vue.js App',
      datadetail:[
        {},
      ],
      cart:null,
      total:null,
      numbercou:null,
      // 微信
      appIdinform:null,
      timestampinform:null,
      nonceStrinform:null,
      signatureinform:null,
      jsApiListinform:[],
      strarray:[],
      strarray1:[],
      cartdata:[
          {
                "id":17104,
                "openid":"ogU7E0dXIRDU1vnwxhHXzzEb_jSI",
                "user_unique_id":31117,
                "shelf_unique_id":2133,
                "num":1,
                "goods_name":"黑卡6小时能量饮料450ml",
                "goods_price":"6.00"
            },
           {
                "id":17105,
                "openid":"ogU7E0dXIRDU1vnwxhHXzzEb_jSI",
                "user_unique_id":31117,
                "shelf_unique_id":2133,
                "num":5,
                "goods_name":"红牛维生素功能饮料250ml",
                "goods_price":"6.00"
            },
            { 
                "id":17104,
                "openid":"ogU7E0dXIRDU1vnwxhHXzzEb_jSI",
                "user_unique_id":31117,
                "shelf_unique_id":2133,
                "num":2,
                "goods_name":"黑卡6小时能量饮料450ml",
                "goods_price":"6.00"
            },
      ],
      totaldata:{
        price:0.00
      }
    }
  },
  filters:{
    pricereturn:function(e){
        return '合计：'+ e + '元' 
    }
  },
  methods:{
    // 删除一件商品
    delgoods:function(id){
      axios.delete(this.$store.state.url + '/shop/user/cart/del',{
        id:id,
        headers :{
              'Accept': 'application/json',
              token:this.$store.state.tokenhongqi,
        }
      })
      .then((res)=>{
          console.log(res);
      })
     
    },
    // 清空购物车
    cartdelgoods:function(){
      var idnum = 2133;
      axios.delete(this.$store.state.url + '/shop/user/cart/clear',{
        unique_id:idnum,
        headers :{
              'Accept': 'application/json',
              token:this.$store.state.tokenhongqi,
        }
      })
      .then((res)=>{
          console.log(res);
      })
     
    },
    // 购物车修改数量 -
    goodsreduce:function(item){
        if(item.num < 2){
          item.num = 1;
        }
        else{
            item.num -- 
        }
        console.log(item.id);
        console.log(item.num);
       axios({
            url:this.$store.state.url + '/shop/user/cart/update',
            method:'put',
            data:{
              id:item.id,
              num:item.num,
            },
           headers :{
              'Accept': 'application/json',
              token:this.$store.state.tokenhongqi,
            }
         })
         .then((res)=>{
            console.log(res);
        })
        
    },
    // 购物车修改数量 +
    goodsadd:function(item){
      item.num ++
         axios({
            url:this.$store.state.url + '/shop/user/cart/update',
            method:'put',
            data:{
              id:item.id,
              num:item.num,
            },
           headers :{
              'Accept': 'application/json',
              token:this.$store.state.tokenhongqi,
            }
         })
         .then((res)=>{
            console.log(res);
        })
    },
    // 扫码购物
    scan:function(){
        console.log("===");
        console.log(this.appIdinform);
        console.log(this.signatureinform);
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: this.appIdinform, // 必填，公众号的唯一标识
            timestamp:this.timestampinform , // 必填，生成签名的时间戳
            nonceStr: this.nonceStrinform, // 必填，生成签名的随机串
            signature: this.signatureinform,// 必填，签名，见附录1
            jsApiList:this.jsApiListinform // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        console.log(wx);
         wx.scanQRCode({
              needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
              success: function (res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                  if(res){
                     axios({
                            url:this.$store.state.url +  '/shop/user/cart/store',
                            method:'post',
                            data:{
                                unique_id:2133,
                                code:res
                            },
                            headers :{
                                'Accept': 'application/json',
                                token:this.$store.state.tokenhongqi
                            }
                        })
                        .then((res)=>{
                            console.log("=========")
                            console.log(res.data);
                        })    
                  }
              }
          });
      
    }
  },
  mounted:function(){
    // 截取url
    // let str = window.location.hash;
    // console.log(str);
    // let strarray = str.split('/');
    // console.log(strarray[1]);
    // console.log(this.$store.state.tokenstatic);
      // 获取微信信息
      var unique_id = 2133;
      axios({   
          url:this.$store.state.url +  '/shop/user/shop?unique_id=' + unique_id ,
          method:'get',
          headers :{
            'Accept': 'application/json',
            token:this.$store.state.tokenhongqi,
          }
        })
        .then((res)=>{
            console.log(res);
            this.appIdinform=res.data.data.wechat.appId;
            console.log(this.appIdinform);
            this.timestampinform=res.data.data.wechat.timestamp;
            console.log(this.timestampinform);
            this.nonceStrinform=res.data.data.wechat.nonceStr;
            console.log(this.nonceStrinform);
            this.signatureinform=res.data.data.wechat.signature;
            console.log(this.signatureinform);
            this.jsApiListinform=res.data.data.wechat.jsApiList;
            console.log(this.jsApiListinform);
        })
   
    // 购物车展示
    var unique_id = 1233;
    axios({
      url:this.$store.state.url +  '/shop/user/cart/show?unique_id=' + unique_id ,
      method:'get',
      headers :{
        'Accept': 'application/json',
        // 'Authorization':tokenstatic,
         token:this.$store.state.tokenhongqi,
      }
    })
    .then((res)=>{
        // this.cart=res.data.data.cart;
        // console.log(this.cart)
        // this.total=res.data.data.total;
        // console.log(this.total)
        // console.log(res);
        // console.log("===")

    })


  },
  created:function(){

  },
  beforeCreate:function(){
      this.pathname=window.location.pathname;
      console.log(this.pathname);
      let str = window.location.href;
      console.log(str);
      if(str.indexOf('?') != -1){
        let str = window.location.href;
        let strarray = str.split('=');
        console.log(strarray);
        let strarraytoken = strarray[1].split("#")
        console.log(strarraytoken);
        this.$store.state.tokenhongqi = strarraytoken[0];
      }
    else{
         console.log('+++');
         window.location.href = 'http://item.fanzhanggui.test.sszshow.com/user_base/user/get_code?url=' + this.pathname; 
      }
  },
  
}
</script>

<style scoped>
  /*1*/
  .home_nav{height:6.7vh;width: 100%;background-color: #21292c;color: white;}
  .home_nav_left{line-height: 6.7vh;}
  .home_nav_middle{line-height: 6.7vh;text-align: center;letter-spacing: 2px;}
  .home_nav_right{line-height: 6.7vh;text-align: right;}
  /*2*/
  .home_nav2{height:8.9vh;width:100%;border-bottom:0.7vh solid #eee;}
  .home_nav2_user{text-align: center;}
  .home_nav2>div{line-height: 8.9vh;}
  .home_nav2_saoma{color:#faa934;}
  /*3*/
  .home_qrcode{height:25.2vh;;width: 100%;display: table-cell;vertical-align: middle;text-align: center;position: relative}
  .home_qrcode img{width: 57%;}
  .home_qrcode span{position: absolute;bottom:0.3vh;right: 2.6%;font-weight: 500;color: #000;text-decoration: underline;}
  /*4*/
  .home_shopcart{height:5.4vh;width: 100%;background-color:#faa934;line-height: 5.4vh;color: white;letter-spacing: 1px;}
  .cleargoods{text-align: right}
  /*5*/
  .home_container{width: 100%;}
  .row_style{width: 100%;border-bottom: 1px solid #eee;padding: 10px 0px;}
  .row_style>div{display: inline-block;text-align: center;}
  .row_one{width: 30%}
  .row_two{width: 17%}
  .row_three{width: 30%}
  .row_four{width: 19%}
  /*6*/
.bottomnav{text-align: center;position:fixed;bottom: 0px;width: 100%;height:6.6vh;border-top: 1px solid #eee;}
.bottomnav>div{margin: 0px;}
.bottom_one{width: 49%;display: inline-block;height: 6.6vh;line-height:  6.6vh;color:#faa934}
.bottom_two{width: 49%;display: inline-block;height: 6.6vh;line-height:  6.6vh;background-color: #faa934;color: white;}
</style>
